<template>
  <transition name="fade">
    <div v-if="!deleted"
         class="card-container"
         :class="isSuccess?'success':'error'">
      <div class="code-card">{{ history.code_context }}</div>
      <div v-if="isSuccess"
           class="result-card">
        {{ history.code_result.out }}
      </div>
      <div v-else
           class="result-card">
        {{ history.code_result.err }}
      </div>
      <div class="code-time">{{ history.create_time }}</div>
      <div class="delete"
           @click="deleteHandle"><i class="iconfont">&#xe777;</i></div>
    </div>
  </transition>
</template>

<script>
import { deleteCode } from '@/api/code'
export default {
  name: 'HistoryCard',
  props: {
    history: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      deleted: false
    }
  },
  computed: {
    isSuccess () {
      return !this.history.code_result.err
    }
  },
  methods: {
    deleteHandle () {
      this.$confirm('删除操作不可逆，是否继续？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCode(this.history.code_id)
          .then((res) => {
            this.deleted = true
            this.$notify.success({
              title: '成功',
              message: res.data,
              position: 'bottom-right'
            })
          })
          .catch((err) => {
            this.$notify.error({
              title: '错误',
              message: err,
              position: 'bottom-right'
            })
          })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.success
  background-color color-success
.error
  background-color color-error
.fade-enter, .fade-leave-to
  transform translateX(-100px)
  opacity 0
.fade-enter-active, .fade-leave-active
  transition 0.5s
.card-container
  position relative
  display flex
  justify-content space-between
  align-items center
  width 100%
  padding 0 20px
  color #fff
  box-sizing border-box
  box-shadow 0 0 5px 2px shadow-color
  border-radius 8px
  &>div
    height 48px
    font-size 16px
    line-height 48px
  .code-card, .result-card
    overflow hidden
    padding 0 5px
  .code-card, .result-card
    width 40%
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .code-time
    min-width 150px
    margin-right 30px
  .delete
    position absolute
    right 0
    background-color color-red
    width 40px
    padding 0 10px
    border-radius 0 8px 8px 0
    cursor pointer
    transition 0.2s background-color ease-in-out
    box-sizing border-box
    &:hover
      background-color color-light-red
    .iconfont
      font-size 20px
</style>
